<!-- https://lbs.qq.com/webDemoCenter/javascriptV2/libraries/placeLibrary -->


<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=place"></script>
 

<h1>地址反查：<a href="https://lbs.qq.com/getPoint/">验证</a></h1>

<input style="width:200px;padding:3px 4px;" type="text" id="place" /> （<span></span>）<br><br>

<div id="container" style="width: 700px; height:400px"></div>


<script>

 var map = new qq.maps.Map(document.getElementById("container"),{
        center:  new qq.maps.LatLng(39.916527,116.397128),
        zoom: 13
    });
    //实例化自动完成
    var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
    var keyword = "";
    //调用Poi检索类。用于进行本地检索、周边检索等服务。
    var searchService = new qq.maps.SearchService({
        complete : function(results){
           if(results.type === "CITY_LIST") {
                searchService.setLocation(results.detail.cities[0].cityName);
                searchService.search(keyword);
                return;
            }
            var pois = results.detail.pois;
            var latlngBounds = new qq.maps.LatLngBounds();
            for(var i = 0,l = pois.length;i < l; i++){
                var poi = pois[i];
                latlngBounds.extend(poi.latLng);  
                // var marker = new qq.maps.Marker({
                //     map:map,
                //     position: poi.latLng
                // });

                // marker.setTitle(poi.name);
            }
            map.fitBounds(latlngBounds);
        }
    });
    //添加监听事件
    qq.maps.event.addListener(ap, "confirm", function(res){
        keyword = res.value;
        searchService.search(keyword);
    });

    //添加dom监听事件
    let markersArray = []
    qq.maps.event.addDomListener(map, 'click', function(event) {
        // 全部清除
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
        // 增加新的
        
        // addMarker(event.latLng);
        let location = event.latLng
        var marker = new qq.maps.Marker({
            position: location,
            map: map
        });
        markersArray.push(marker);

        // 显示坐标
        document.querySelector('span').innerHTML = location
    }); 
</script>